        
        
        
        var proSwp = new Swiper('.proSwp',{
            
        })
        var pronavSwp = new Swiper('.pronavSwp',{
            slidesPerView: 4,
            spaceBetween: 10,
            centeredSlides : true,
            slideToClickedSlide: true,
            
        })

        proSwp.controller.control = pronavSwp;
        pronavSwp.controller.control = proSwp;
        var watchSwiper = null;
        watchSwiper = setInterval(function(){
            if($('main .swiper .proSwp .swiper-slide:first-child')[0].className.indexOf('active') >= 0){
                $('main .swiper .proSwp .btn').removeClass('disable');
                $('main .swiper .proSwp .btn.prev').addClass('disable');
            }else if($('main .swiper .proSwp .swiper-slide:last-child')[0].className.indexOf('active') >= 0){
                $('main .swiper .proSwp .btn').removeClass('disable');
                $('main .swiper .proSwp .btn.next').addClass('disable');
            }else{
                $('main .swiper .proSwp .btn').removeClass('disable');
            }
        },10)
        
        $(document).ready(function(){
            $('main .swiper .proSwp .btn').click(function(){
                if($(this)[0].className.indexOf('prev') >= 0){
                    proSwp.slidePrev();
                }else{
                    proSwp.slideNext();
                }

                
            })


            /**
             * 完成下面选择图片的效果：
             *         1.当鼠标放置在下面的小图片时，改变边框属性
             *         2.更改含有bigimage的img标签的src，进行图片更换
             */
            $("[smallimage]").mouseover(function(){
                $('main .info .box .down li').removeClass('active')
                var src = $(this).attr("src");
                $(this).parent().addClass('active');
                $("[bigimage]").attr("src",src);
            })
            /**
             * 大图鼠标移动事件：
             *         1.设置mirror所在的img标签的display属性为block，即让它显示
             *         2.当鼠标在内部移动的时候，通过计算，在mirror中进行放大显示
             * 鼠标移出事件：
             *         设置mirror不可见 display:none
             */
            $("[bigimage]").mousemove(function(even){
                //获取大图的相对文档的偏移量
                var offset = $(this).offset();
                //获取鼠标相对于大图左上角的x轴偏移量
                var x = even.pageX - offset.left;
                //获取鼠标相对于大图左上角的y轴偏移量
                var y = even.pageY - offset.top;
                //设置放大镜放大倍数，可自行设置
                var multiple = 2;
                //获取放大镜所在div的宽度和高度
                
                var mirrorwidth = $(".dtl").width();
                var mirrorHeight = $(".dtl").height();
                var upWidth = $('.up').width();
                var upHeight = $('.up').height();
                var areaWidth = $('.area').width();
                var areaHeight = $('.area').height();

                if(x <= areaWidth / 2){
                    $('main .info .box .up img + span').css('left','0px');
                }else if(x >= upWidth - areaWidth / 2){
                    $('main .info .box .up img + span').css('left',(upWidth - areaWidth + 'px'));
                }else{
                    $('main .info .box .up img + span').css('left',(x - areaWidth / 2 + 'px'));
                }

                if(y <= areaHeight / 2){
                    $('main .info .box .up img + span').css('top','0px');
                }else if(y >= upHeight - areaHeight / 2){
                    $('main .info .box .up img + span').css('top',(upHeight - areaHeight + 'px'));
                }else{
                    $('main .info .box .up img + span').css('top',(y - areaHeight / 2 + 'px'));
                }

                $('main .info .box .up .mouse')[0].style.cssText="left: " + x + 'px;top: ' + y + 'px;';
                
                //获取bigimage此时的src的值
                var src = $(this).attr("src");
                //更改放大镜的src的值，切换图片
                $("[mirror]").attr("src",src);
                $(".dtl").css("display","block").scrollLeft(Math.max(x*multiple - mirrorwidth/2.0)).scrollTop(Math.max(y*multiple - mirrorHeight/2.0));
            }).mouseout(function(){
                $(".dtl").css("display","none");
            });
        })